<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ include file="header.jsp" %>

<style>
.blog-content {
    background: white;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.blog-content:hover {
    transform: translateY(-2px);
}

.blog-body {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.comment-section {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.comment-section h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: #2c3e50;
    border-bottom: 2px solid #f1f1f1;
    padding-bottom: 0.5rem;
}

/* 评论表单 */
.comment-form {
    margin-bottom: 2rem;
}

.comment-form textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    resize: vertical;
    font-family: inherit;
    font-size: 1rem;
    transition: border 0.3s;
}

.comment-form textarea:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 3px rgba(52,152,219,0.1);
}

.comment-form button {
    background: #3498db;
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s;
    margin-top: 0.5rem;
}

.comment-form button:hover {
    background: #2980b9;
    transform: translateY(-1px);
}

/* 评论列表 */
.comment-list {
    margin-top: 1.5rem;
}

.comment-item {
    padding: 1.2rem;
    margin-bottom: 1.2rem;
    background: #f9f9f9;
    border-radius: 6px;
    position: relative;
    transition: all 0.3s;
    border-left: 4px solid #3498db;
}

.comment-item:hover {
    background: #f1f1f1;
    transform: translateX(5px);
}

.comment-content {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 0.5rem;
}

.comment-meta {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: #7f8c8d;
}

.comment-author {
    font-weight: bold;
    color: #3498db;
    margin-right: 0.8rem;
}

.comment-time {
    color: #95a5a6;
}

/* 点赞按钮样式 */
.btn.liked {
    background-color: #ffecec !important;
    color: #e74c3c !important;
    border-color: #e74c3c !important;
}

.btn.liked:hover {
    background-color: #fadbd8 !important;
}

/* 点赞数动画 */
.like-count {
    transition: all 0.3s ease;
    display: inline-block;
    margin-left: 5px;
    font-weight: bold;
}

.like-animate {
    transform: scale(1.5);
    color: #e74c3c;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .blog-content, .comment-section {
        padding: 1.2rem;
    }

    .comment-item {
        padding: 1rem;
    }
}
</style>

<div class="blog-content">
    <h1>${blog.title}</h1>
    <p class="blog-meta">作者: ${blog.authorName} | 发布于: <fmt:formatDate value="${blog.createdAt}" pattern="yyyy-MM-dd HH:mm"/> | 浏览量: ${blog.viewCount}</p>

    <div class="blog-body">
        ${blog.content}
    </div>

    <div class="blog-actions">
        <div>
            <c:if test="${not empty sessionScope.user && sessionScope.user.id == blog.userId}">
                <a href="${pageContext.request.contextPath}/blog/edit?id=${blog.id}" class="btn">编辑</a>
                <a href="${pageContext.request.contextPath}/blog/delete?id=${blog.id}" class="btn btn-danger" onclick="return confirm('确定要删除这篇博客吗？')">删除</a>
            </c:if>
        </div>
        <div>
            <c:if test="${not empty sessionScope.user}">
                <a href="javascript:void(0)"
                   onclick="handleLike(${blog.id}, ${not empty liked && liked})"
                   class="btn ${not empty liked && liked ? 'liked' : ''}"
                   id="like-btn-${blog.id}">
                   ${not empty liked && liked ? '❤️ 已点赞' : '👍 点赞'}
                </a>
                <span class="like-count" id="like-count-${blog.id}">${likeCount}</span>
            </c:if>
        </div>
    </div>
</div>

<div class="comment-section">
    <h3>评论 (${comments.size()})</h3>

    <%-- 评论表单 --%>
    <c:if test="${not empty sessionScope.user}">
        <form class="comment-form" action="${pageContext.request.contextPath}/comment/add" method="post">
            <input type="hidden" name="blogId" value="${blog.id}">
            <textarea name="content" required placeholder="写下你的想法..."></textarea>
            <button type="submit">发表评论</button>
        </form>
    </c:if>

    <%-- 评论列表 --%>
    <div class="comment-list">
        <c:choose>
            <c:when test="${not empty comments}">
                <c:forEach items="${comments}" var="comment">
                    <div class="comment-item">
                        <div class="comment-content">
                            ${comment.content}
                        </div>
                        <div class="comment-meta">
                            <span class="comment-author">${comment.authorName}</span>
                            <span class="comment-time">
                                <fmt:formatDate value="${comment.createdAt}" pattern="yyyy-MM-dd HH:mm"/>
                            </span>
                        </div>
                    </div>
                </c:forEach>
            </c:when>
            <c:otherwise>
                <div class="no-comments">
                    <p>还没有评论，快来抢沙发吧~</p>
                </div>
            </c:otherwise>
        </c:choose>
    </div>
</div>

<script>
function handleLike(blogId, isLiked) {
    const url = '${pageContext.request.contextPath}/blog/' +
               (isLiked ? 'unlike' : 'like') +
               '?id=' + blogId;

    fetch(url, {
        method: 'POST',
        headers: {
            'Accept': 'application/json'
        }
    })
    .then(response => {
        if (!response.ok) throw new Error('网络响应不正常');
        return response.json();
    })
    .then(data => {
        if (data.success) {
            const likeBtn = document.getElementById('like-btn-' + blogId);
            const likeCount = document.getElementById('like-count-' + blogId);

            if (isLiked) {
                likeBtn.innerHTML = '👍 点赞';
                likeBtn.classList.remove('liked');
            } else {
                likeBtn.innerHTML = '❤️ 已点赞';
                likeBtn.classList.add('liked');
            }

            // 更新点赞数
            if (data.likeCount !== undefined) {
                likeCount.textContent = data.likeCount;

                likeCount.classList.add('like-animate');
                setTimeout(() => {
                    likeCount.classList.remove('like-animate');
                }, 500);
            }
        } else {
            alert(data.message || '操作失败');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('操作失败: ' + error.message);
    });
}
</script>

<%@ include file="footer.jsp" %>